<template>
  <div class="question-detail">
    <div class="items">
      <div
        v-for="(item, index) in items"
        v-show="currentPage == (index + 1)"
        :key="index"
        class="item"
      >
        <h3 class="title">{{ index+1 }}、{{ item.subject_title }}</h3>
        <div class="options clearfix">
          <div class="pull-left">
            <el-radio-group
              v-model="item.checkedAnswer"
              @change="check(index)"
            >
              <el-radio
                v-for="(option, childIndex) in item.options"
                :key="childIndex"
                :label="childIndex"
                :disabled="!!item.checkedAnswer"
              >
                <span style="margin-right: 5px">{{ ['A','B','C', 'D'][childIndex] }}、</span>
                <span v-show="item.answer == childIndex && item.checkedAnswer == childIndex" class="el-icon-circle-check" />
                <span v-show="item.answer != childIndex && item.checkedAnswer == childIndex" class="el-icon-circle-close" />
                <span v-show="item.checkedAnswer !=null && item.answer == childIndex" class="el-icon-circle-check" />
                <!-- {{['A','B','C', 'D'][childIndex]}}、 -->
                <span v-if="item.content_type == 1">{{ option }}</span>
                <el-popover
                  v-else
                  placement="right"
                  class="img-popver"
                  trigger="hover"
                >
                  <img slot="reference" class="img" :src="option" alt="">
                  <img class="big-img" :src="option" alt="">
                </el-popover>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="pull-left">
            <img v-show="item.content_type == 1" class="subject_url" style="height: 300px" :src="item.subject_url" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="button-group clearfix">
      <el-button :disabled="currentPage == 1" class="pull-left" type="primary" @click="prev">上一题</el-button>
      <el-button v-show="currentPage < max" class="pull-left" type="primary" @click="next">下一题</el-button>
      <el-button v-show="currentPage == max" class="pull-left" type="primary" @click="submit">完&nbsp;&nbsp;成</el-button>
    </div>
    <div class="auto-check">
      <el-checkbox v-model="isAuto">答题后自动下一题</el-checkbox>
      <!-- <span>答对：题</span>
      <span>答错：题</span>
      <span>正确率：</span> -->
    </div>
    <div class="score-group">
      <span
        v-for="(item, index) in scores"
        :key="index"
        class="span-block"
        @click="currentPage = (index+1)"
      >
        <el-button
          v-show="item.value == 'right'"
          size="mini"
          type="success"
        >
          {{ index+1 }}
        </el-button>
        <el-button
          v-show="item.value == 'error'"
          size="mini"
          type="danger"
        >
          {{ index+1 }}
        </el-button>
        <el-button
          v-show="item.value == 'blank'"
          size="mini"
          type="default"
        >
          {{ index+1 }}
        </el-button>
        <el-button
          v-show="item.value == 'active'"
          size="mini"
          type="primary"
        >
          {{ index+1 }}
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { generate, submit } from '@/api/question'
export default {
  data() {
    return {
      radio: 3,
      isAuto: true,
      currentPage: 1,
      max: 0,
      items: [],
      scores: [
        { id: 1, value: 'active' },
        { id: 2, value: 'blank' },
        { id: 3, value: 'blank' },
        { id: 4, value: 'blank' },
        { id: 5, value: 'blank' }
      ]
    }
  },
  watch: {
    'currentPage': {
      handler() {
        this.items.map(({ checkedAnswer, answer }, index) => {
          const checked = ['A', 'B', 'C', 'D'][checkedAnswer]
          const actual = ['A', 'B', 'C', 'D'][answer]
          if (checked == actual) {
            this.scores[index].value = 'right'
          } else if (checked != actual && checked) {
            this.scores[index].value = 'error'
          } else if (this.currentPage == (index + 1)) {
            this.scores[index].value = 'active'
          } else if (checked == null) {
            this.scores[index].value = 'blank'
          }
        })
      },
      immediate: true
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const paramsData = this.$route.params.id.split('&')
      const params = {
        select_type: paramsData[0],
        author: 'tomy',
        select_content: paramsData[1]
      }
      const res = await generate(params)
      if (res.code == '200' && res.data) {
        this.max = res.data.length
        const maps = { A: 0, B: 1, C: 2, D: 3 }
        res.data.map(item => {
          item.title = item.subject_title, // 题目标题
          item.answer = maps[item.right_answer], // 该题目答案，为options的数组下标
          item.checkedAnswer = null, // 客户选择的答案，后台返回默认为null
          item.options = [item.option_a, item.option_b, item.option_c, item.option_d] // 选项列表：文字或图片，两种类型
        })
        this.items = res.data
      }
    },
    prev() {
      if (this.currentPage > 1) this.currentPage--
    },
    next() {
      if (this.currentPage < this.max) this.currentPage++
    },
    check(index) {
      if (this.isAuto && this.currentPage < this.max) {
        const checkedAnswer = this.items[index].checkedAnswer
        const answer = this.items[index].answer
        if (checkedAnswer == answer) {
          setTimeout(() => {
            this.currentPage++
          }, 1000)
        }
      }
    },
    async submit() {
      const params = this.items
      params.forEach(item => {
        item.actual_answer = ['A', 'B', 'C', 'D'][item.checkedAnswer]
      })
      const res = await submit(params)
      if (res.code == 200 && res.data) {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push('/question/list')
        }, 500)
      }
    }
  }
}
</script>
<style lang="scss">
// .img-popver {
//   height: 320px;
//   width: 320px;
//   .big-img {
//     height: 300px !important;
//     width: 300px !important;
//   }
// }
.question-detail{
  padding-top: 47px;
  padding-left: 50px;
  .el-cascader-node>.el-radio, .el-radio:last-child {
    margin-right: 30px;
  }
  h3{
    margin: 0;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    line-height: 44px;
    margin-bottom: 30px;
  }
  .el-radio-group {
  }
  .el-radio__label {
    display: flex;
    align-items: center;
  }
  .el-radio{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 88px;
    .el-radio__inner{
      width: 20px;
      height: 20px;
    }
    .img {
      display: inline-block !important;
      height: 88px !important;
      width: 88px !important;
      vertical-align: top;
    }
  }
  .options{
    .pull-left{
      .subject_url{
        margin-top: 70px;
        margin-left: 200px;
        display: block;
        height: 300px;
        width: 400px;
        background: #ccc;
      }
    }
  }
  .button-group{
    margin-top: 20px;
    margin-bottom: 5px;
    .el-button{
      margin-right: 5px;
    }
  }
  .score-group{
    margin-top: 30px;
    .el-button{
      margin-right: 10px !important;
      margin-left: 0 !important;
    }
  }
  .el-icon-circle-close{
    position: absolute;
    z-index: 999;
    left: -1px;
    top: 32px;
    font-size: 22px;
    color: #f00;
    background: #fff;
  }
  .el-icon-circle-check{
    position: absolute;
    z-index: 999;
    left: -1px;
    top: 32px;
    font-size: 22px;
    color: #67C23A;
    background: #fff;
  }
}
</style>
